<!--预览查看modal-->
<template>
  <a-modal
    v-model="previewShow"
    :title="title"
    :footer="null"
    width="900px"
    @cancel="handleCancel"
  >
    <div class="load" @click="uploads">
      下载
      <a-icon style="color: #fff;margin-left: 4px" type="download" />
    </div>
    <iframe
      name="iframe_a"
      id="iframe_a"
      v-if="pdfShow"
      :src="pdfUrl + '#toolbar=0'"
      type="application/x-google-chrome-pdf"
      width="100%"
      frameborder="0"
      scrolling="no"
      height= "600px"
    />
    <div class="imgBox">
      <img ref="imgShow" v-if="!pdfShow" :v-lazy="imgUrl" :src="imgUrl" :class="isHeight ? 'hovImg' : 'verImg'" alt="预览图">
    </div>
  </a-modal>
</template>

<script>
import { getCaptionFileName } from '@/utils/util'
// import { fileNameInterception } from '../../common/index'

export default {
  name: 'previewShow',
  data(){
    return{
      title: '预览',
      previewShow: false,
      pdfShow: false,
      pdfUrl: null,
      imgUrl: null,
      isHeight: false
    }
  },
  props: ['url','name','isShow'],
  watch:{
    isShow:{  // 监控该变量，重新赋值并刷新图表
      handler(newVal, oldVal){
        this.previewShow = newVal
      }
    },
    url: {
      handler(newVal, oldVal){
        if (newVal){
          if(this.url.includes('.pdf') || this.url.includes('.PDF')){
            this.pdfShow = true;
            this.pdfUrl = newVal;
          }else{
            this.pdfShow = false;
            this.imgUrl = newVal;
          }
        }
      }
    }
  },
  mounted() {
    // const iframe = window.frames;
    // console.log(iframe)

    //子接收父传值
    if (this.url){
      if(this.url.includes('.pdf') || this.url.includes('.PDF')){
        this.pdfShow = true;
        this.pdfUrl = this.url;
      }else{
        this.pdfShow = false;
        this.imgUrl = this.url;
        this.getImgLength();
      }
    }
    if (this.isShow){
      this.previewShow = this.isShow;
    }
    if (this.name){
      this.title = this.name;
    }
  },
  methods: {
    //获取图片宽高
    getImgLength(){
      this.$nextTick(() => {
        if (this.$refs.imgShow.width / this.$refs.imgShow.height > 1349 / 909) {
          this.isHeight = true;
        } else {
          this.isHeight = false;
        }
      })
    },
    //下载
    uploads(){
      let data = this.url;
      //从链接上截取文件名
      let name = getCaptionFileName(data);

      fetch(data).then((res) => {
        res.blob().then((blob) => {
          const url = window.URL.createObjectURL(blob)
          const a = document.createElement('a')
          a.href = url
          a.download = name;
          a.click()
          window.URL.revokeObjectURL(url)
        })
      })
    },
    //关闭
    handleCancel(){
      this.$emit('modalHidden');
    },
  },

}
</script>

<style scoped lang="less">
.load{
  width: 100%;
  text-align: right;
  background: #525659;
  padding: 12px 25px 13px 15px;
  color:#fff;
  font-size: 16px;
  cursor: pointer;
}

.imgBox{
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: auto;
}
.hovImg{
  width: 100%;
  height: auto;
}
.verImg{
  width: auto;
  height: 100%;

}
</style>
